<template>
  <!-- 视频页面 -->
  <div class="Recommend">
    <ul>
      <li v-for="(feed, index) in feedslist" :key="feed.id">
        <div
          class="video"
          v-if="feed.alreadyUp == false"
          @click="$emit('amend', index)"
        >
          <img :src="feed.shareInfo.img" />
          <p class="text">{{ feed.shareInfo.title }}</p>
          <!-- 时间 -->
          <p class="time" v-if="feed.video">
            {{ feed.video.dur | totalTime }}
          </p>
          <p class="time" v-else>01:38</p>
        </div>
        <!-- 视频 -->
        <div class="video" v-if="feed.video && feed.alreadyUp == true">
          <video autoplay controls>
            <source :src="feed.video.url" />
          </video>
        </div>
        <!-- 视频结束 -->
        <div class="message">
          <div class="usimg">
            <img :src="feed.user.avatarurl" alt="" />
          </div>
          <div class="name">{{ feed.user.nickName }}</div>

          <div class="right">
            <!-- 点赞 -->
            <div
              class="count"
              :style="goodset(feed.id) ? 'color: red' : ''"
              @click="upcount(feed)"
            >
              <van-icon name="good-job-o" />
              <span>{{ feed.upCount }}</span>
            </div>
            <!-- 评论 -->
            <div class="count">
              <van-icon name="chat-o" />
              <span>{{ feed.commentCount }}</span>
            </div>
            <van-icon name="share-o" />
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    feedslist: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      // feedsList: [],
      videoshow: false,
      // 存放点赞id
      goodId: [],
    };
  },
  methods: {
    // 点赞
    upcount(feed) {
      if (!this.goodset(feed.id)) {
        this.goodId.push(feed.id);
      } else {
        for (let i = 0; i < this.goodId.length; i++) {
          if (this.goodId[i] == feed.id) {
            this.goodId.splice(i, 1);
          }
        }
      }

      console.log(this.goodId);
      this.$emit("upcount", feed);
    },

    // 判断是否高亮
    goodset(id) {
      var set = new Set(this.goodId);
      if (set.has(id)) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {
    // this.getFeeds();
  },
  computed: {},
  filters: {
    totalTime(time) {
      // console.log(time);
      let total = parseInt(time / 60);
      let s = (time % 60).toString().padStart(2, "0");
      return `${total}:${s}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.Recommend {
  // 视频
  .video {
    position: relative;
    video {
      width: 100%;
    }
    // 视频图片
    img {
      width: 100%;
      height: 209px;
    }
    // 文本
    .text {
      position: absolute;
      top: 10px;
      left: 15px;
      right: 20px;
      color: #fff;
      line-height: 25px;
    }
    // 时间
    .time {
      position: absolute;
      bottom: 10px;
      right: 10px;
      color: #fff;
    }
  }
  // 信息条
  .message {
    height: 50px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    // 头像
    .usimg {
      width: 50px;
      text-align: center;
      img {
        width: 22px;
        height: 22px;
        border-radius: 50%;
      }
    }
    // 名字
    .name {
      flex: 1;
      font-size: 14px;
      color: #666;
    }
    // 徽标
    .right {
      padding-right: 20px;
      width: 120px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // 点赞评论
      .count {
        font-size: 18px;
        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style>